<template>
    <view>
        <mescroll-uni
            @init="mescrollInit"
            :height="height"
            :down="downOption"
            @down="refresh"
            :up="upOption"
            @up="getData">
            <view>
                <view class="main-box" v-for="item in datas">
                    <view class="top-box">
                        <image
                            v-if="item.PageType != 304"
                            :src="easyGetImgListUrl(item.ImageUrl)"
                            mode="aspectFill"></image>
                        <image v-else :src="easyGetImgUrl(item.VideoImageUrl)" mode="aspectFill"></image>
                        <view class="name">
                            <view>{{ item.Title }}</view>
                            <view class="product-price"
                                ><text>￥</text>
                                <view>{{ item.Price }}</view>
                            </view>
                        </view>
                        <image v-if="item.IsHighIntent == 1" src="/static/intention2.png" class="label"></image>
                        <image v-else src="/static/intention1.png" class="label"></image>
                    </view>
                    <view class="bottom">
                        <view class="share">
                            <view
                                ><text>{{ item.AddTime }}</text></view
                            >
                           <!-- <view
                                >分享数：<text>{{ item.ShareNum }}</text></view
                            > -->
                        </view>
                        <view
                            >累计查看时长：<text v-if="item.PageType != 304">{{
                                formateSeconds(item.StaySeconds)
                            }}</text>
                            <text v-else>{{ item.MaxSeconds }}%</text>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-uni>
    </view>
</template>

<script>
import { agenttracklist } from "@/service/api/erp.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        userId: {
            type: String,
        },
        height: {
            type: String,
            default: "100px",
        },
    },
    data() {
        return {
            datas: [],
            storeId: "",
            numlist: {},
            active: 1,
            param: {
                dateType: 99,
                pageType: 300,
                eventType: 1,
                skipCount: 0,
                maxResultCount: 20,
            },
        }
    },
    mounted() {
        this.storeId = storage.getCache("businessCode")
        this.refresh()
    },
    onShow() {},
    methods: {
        tab(num, type) {
            if (this.active != num) {
                this.active = num
                this.param.pageType = type
                this.refresh()
            }
        },
        refresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
        getData(page) {
            let param = this.param
            param.maxResultCount = page.size
            param.skipCount = page.num
            param.storeId = 0
			agenttracklist(param).then(res => {
				console.log(res)
				if (res.State==1) {
					this.total = res.Data.RecordAmout;
					this.numlist = res.Data.Data;
					this.mescroll.endBySize(res.Data.length, res.Data.RecordAmout);
					this.datas = this.datas.concat(res.Data)
				}else{
					this.easyToast(res.Msg)
				}
			})
        },
    },
}
</script>

<style lang="scss">
.main-box {
    background: $color-white;
    border-bottom: 1rpx solid #f0f0f0;
    .top-box {
        display: flex;
        flex: 1;
        position: relative;
        padding: $app-page-padding;
        justify-content: flex-start;
        align-items: center;

        image {
            width: 148rpx;
            height: 148rpx;
            margin-right: $app-page-padding;
        }

        .name {
            display: flex;
            height: 148rpx;
            flex-direction: column;
            justify-content: space-around;

            .product-price {
                display: flex;
                align-items: baseline;
                color: #c4181f;
                font-size: 36rpx;

                text {
                    color: #c4181f;
                    font-size: 20rpx;
                }
            }
        }

        .label {
            width: 96rpx;
            height: 96rpx;
            top: 0;
            right: -$app-page-padding;
            position: absolute;
        }
    }

    .bottom {
        color: $color-gray-3;
        padding: 12rpx $app-page-padding $app-page-padding $app-page-padding;
        font-size: $app-page-padding;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .share {
            display: flex;
            justify-content: flex-start;

            view {
                margin-right: 30rpx;
            }
        }
    }

    .tag-menu {
        display: flex;
        justify-content: flex-start;
        padding-left: $app-page-padding;
        margin: 10px 0 $app-page-padding 0;

        view {
            height: 52rpx;
            background: rgba(196, 24, 31, 0.1);
            border-radius: 26rpx;
            margin-right: 20rpx;
            font-size: 26rpx;
            padding: 0rpx 26rpx;
            color: #c4181f;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
        }

        .active {
            background: #c4181f;
            color: #ffffff;
        }
    }
}
</style>
